<!--评价信息-->
<template>
   <div class="tab-bar">
        <div v-for="(item, index) in tabList" :class="activeId == item.id ? 'item-tab-active' : 'item-tab' " @click="handleTab(item.id)"> 
            <img :src="activeId == item.id ? item.activeUrl : item.url" class="item-img"/>{{item.name}}
        </div>
   </div>
</template>
<script setup lang="ts">
    import shouquan_icon  from '@/assets/images/shouquan_icon.png'
    import shouquan_icon_act  from '@/assets/images/shouquan_active_icon.png'
	const { proxy } = getCurrentInstance() as any;
    const emits = defineEmits(['handleTabActiveId']);
    const activeId = ref(2)
    const tabList = [
        // {
        //     id: 1,
        //     name: '数据台账',
        //     url: 'src/assets/images/taizhang_icon.png',
        //     activeUrl: 'src/assets/images/taizhang_active_icon.png',
        // },
        {
            id: 2,
            name: '应用授权',
            url: shouquan_icon,
            activeUrl: shouquan_icon_act,
        }
    ]
    const handleTab =  (id: number)=>{
        activeId.value = id
        emits("handleTabActiveId",id)
    }

	const created = async () => {
	};
	created();
</script>
<style scoped lang="scss">
	
    .tab-bar{
        border-right: 1px solid #DBDCDD;
        width: 215px;
        height: 94%;
        position: fixed;
        .item-tab{
            display: flex;
            align-items: center;
            margin-left: 15px;
            height: 36px;
            line-height: 36px;
            margin-left: 15px;
            border-radius: 10px;
            padding: 0 10px;
            cursor: pointer;
        }
        .item-tab-active{
            background-color: #F3F4F6;
            display: flex;
            align-items: center;
            width: 184px;
            height: 36px;
            line-height: 36px;
            margin-left: 15px;
            padding: 0 10px;
            cursor: pointer;
        }
        .item-img{
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }
    }

</style>
